<template>
	<view class="case-details" v-if="showPage">
		<view class="banner">
			<swiper class="swiper" :style="{height: swiperHeight + 'px'}" :indicator-dots="indicatorDots" :autoplay="autoplay"
			 :interval="interval" :duration="duration" @change="swiperChange">
				<swiper-item v-for="(item,index) in caseInfo.vice_big" :key="index">
					<view class="swiper-item">
						<image :src="item" :class="'slide-image slide-image-' + index" mode="widthFix" @load="imgLoad($event,index)"
						 @click="preview(item)"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="click-view">人气{{caseInfo.click_mun}}</view>
		</view>
		<view class="content-top">
			<view class="case-name">{{caseInfo.case_name}}</view>
			<view class="square-info">{{caseInfo.square}}m² {{caseInfo.space}}</view>
			<view class="brief">{{caseInfo.brief}}</view>


			<view class="line"></view>

			<view class="case-goods-view">
				<view class="case-goods-title">案例商品</view>
				<view v-if="goodsList.length">
					<scroll-view class="case-goods-list" scroll-x="true">
						<view class="scroll-view-item" v-for="(item,index) in goodsList" :key="index" @click="goGoodsDetails(item.goods_id)">
							<image :src="item.image_middle" mode=""></image>
							<view class="case-goods-name">{{item.goods_name}}</view>
							<view class="case-goods-price">¥{{item.retail_price}}</view>
							<view class="case-goods-click">人气{{item.click}}</view>
						</view>
					</scroll-view>
					<view class="more-btn" @click="goCaseGoodsList">查看更多</view>
				</view>
				<lw-nodata v-else></lw-nodata>
			</view>
		</view>

		<view class="message-view">
			<view class="message-title">留言</view>
			<view v-if="commentList.length">
				<scroll-view class="message-list" scroll-x="true">
					<view class="scroll-view-item" v-for="(item,index) in commentList" :key="index">
						<view class="user-info">
							<image :src="item.heard_img" mode=""></image>
							<view class="user-info-right">
								<view class="name">{{item.nickname}}</view>
								<view class="time">{{item.add_time}}</view>
							</view>
						</view>
						<view class="comment">{{item.content}}</view>
					</view>
				</scroll-view>
				<view class="more-btn" @click="goCommentList">查看更多</view>
			</view>
			<lw-nodata v-else></lw-nodata>
		</view>

		<view class="case-recommen">
			<view class="case-recommen-title">案例推荐</view>
			<view v-if="recomList.length">
				<scroll-view class="recommen-list" scroll-x="true">
					<view class="case-item" v-for="(data,index) in recomList" :key="index" @click="goInfo(data.case_id)">
						<image :src="data.image" mode="aspectFill"></image>
						<view class="case-info">
							<view class="case-name">{{data.case_name}}</view>
							<view class="case-brief">
								<block>
									<text>{{data.style_name}}</text>
									<text>{{data.space}}</text>
									<text>{{data.square}}㎡</text>
								</block>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<lw-nodata v-else></lw-nodata>
		</view>

		<view class="case-details-img">
			<view class="case-details-title">案例效果图</view>
			<view class="u-content" v-if="caseInfo.content != null">
				<u-parse :html="caseInfo.content" :lazy-load="true" :selectable="true"></u-parse>
			</view>
			<view class="img-list" v-if="caseInfo.content == null">
				<image mode="widthFix" v-for="(item,index) in caseInfo.img_info" :src="item" :key="index" @click="EnlargeImage(item)"></image>
			</view>
		</view>


		<view class="botton-menu">
			<view class="leave-btn" @click="leave">
				<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-08-26/20200826/1994e9fbe0eeafc20ed279361aa38b6f.png"
				 mode=""></image>
				<view>留言</view>
			</view>
			<view class="collect-btn" @click="collect">
				<image :src="collectImg" mode=""></image>
				<view>收藏</view>
			</view>
			<view class="call-btn" @click="callPhone">装修到我家</view>
		</view>

		<u-popup v-model="showLeave" mode="bottom" border-radius="8" :closeable="true">
			<view class="popup-title">编辑留言</view>
			<view class="input-view">
				<u-input v-model="content" type="textarea" height="300" :auto-height="true" :clearable="false" />
				<u-button @click="Submit" :ripple="true" :custom-style="customStyle" throttle-time="1000">确认提交</u-button>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				collectImg: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-08-26/20200826/adcc9e16acd025017c08e589da38fef6.png',
				customStyle: {
					borderColor: '#000000', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#fff',
					background: '#000000',
				},
				swiperHeight: '',
				content: '',
				showLeave: false,
				goodsList: [],
				commentList: [],
				recomList: [],
				caseId: '',
				caseInfo: '',
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				showPage: false,
			};
		},
		onLoad(options) {
			this.caseId = options.case_id
			if (options.parent_id) {
				uni.setStorageSync('parent_id', options.parent_id)
				// 如果用户从分享的小程序卡片点击进来的,设置一个url缓存,登录后返回当前缓存url
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				uni.setStorageSync('newurl', curPage.$page.fullPath)
			}
			this.init()
			this.getExampleRecommendCase()
		},
		methods: {
			init() {
				this.$u.apiWei.ExampleCaseData({
					case_id: this.caseId
				}).then(res => {
					this.caseInfo = res.datas
					this.showPage = true
					this.goodsList = res.datas.goods.goods_list
					this.commentList = res.datas.comment.comment_list
					let user_id = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).user_id : 0
					this.$u.mpShare = {
						title: this.caseInfo.case_name,
						path: 'pages/case-list/case-details/case-details?case_id=' + this.caseId + '&parent_id=' + user_id,
						imageUrl: this.caseInfo.image
					}
				})

				this.$u.apiWei.ExampleCaseData({
					case_id: this.caseId
				}).then(res => {
					this.caseInfo = res.datas
					if (this.caseInfo.is_collect == 0) {
						this.collectImg =
							'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-08-26/20200826/adcc9e16acd025017c08e589da38fef6.png'
					} else {
						this.collectImg =
							'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-08-26/20200826/f6cdf1b87d3e6ff1b7cce7ccab1ed4f1.png'
					}
				})
			},
			imgLoad(e, index) {
				if (index == 0) {
					this.swiperHeight = Math.floor(750 * uni.getSystemInfoSync().windowWidth / 750 * e.detail.height / e.detail.width)
				}
			},
			getExampleRecommendCase() {
				let data = {
					case_id: this.caseId,
					page: 0,
					limit: 50,
					asc: 1,
					order_by: 'add_time',
					store_id: uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).store_id : 1
				}
				this.$u.apiWei.ExampleRecommendCase(data).then(res => {
					this.recomList = res.datas.list
				})
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).service_phone : ''
				});
			},
			leave() {
				this.showLeave = true
			},
			goInfo(e) {
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/case-list/case-details/case-details?case_id=' + e
				})
			},
			collect() {
				this.$u.apiWei.ExampleCaseCollect({
					case_id: this.caseInfo.case_id
				}).then(res => {
					if (this.caseInfo.is_collect == 0) {
						this.caseInfo.is_collect = 1
						this.collectImg =
							'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-08-26/20200826/f6cdf1b87d3e6ff1b7cce7ccab1ed4f1.png'
					} else {
						this.caseInfo.is_collect = 0
						this.collectImg =
							'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-08-26/20200826/adcc9e16acd025017c08e589da38fef6.png'
					}
					uni.showToast({
						icon: 'none',
						title: res.datas,
					})
				})
			},
			Submit() {
				let obj = {
					case_id: this.caseInfo.case_id,
					content: this.content
				}
				if (!this.content) {
					uni.showToast({
						icon: 'none',
						title: '留言内容不能为空哦~'
					})
				} else {
					this.$u.apiWei.ExampleAddCaseComment(obj).then(res => {
						uni.showToast({
							icon: 'none',
							title: res.datas
						})
						this.content = ''
						this.showLeave = false
						this.init()
					})
				}
			},
			goCommentList() {
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/case-list/case-details/case-comment-list/case-comment-list?case_id=' + this.caseInfo.case_id
				})
			},
			goCaseGoodsList() {
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/case-list/case-details/case-goods-list/case-goods-list?case_id=' + this.caseInfo.case_id
				})
			},
			goGoodsDetails(id) {
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/product-info/product-info?goods_id=' + id
				})
			},
			preview(current) {
				uni.previewImage({
					current: current,
					urls: this.caseInfo.vice_big
				});
			},
			EnlargeImage(img) {
				uni.previewImage({
					urls: this.caseInfo.img_info,
					current: img
				});
			},
			swiperChange(e) {
				let query = uni.createSelectorQuery().in(this),
					class_name = '.slide-image-' + e.detail.current
				query.select(class_name).boundingClientRect(res => {
					if (res) {
						this.swiperHeight = res.height
					}
				}).exec();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6FF;
	}

	.case-details {
		.banner {
			position: relative;

			.click-view {
				position: absolute;
				right: 10rpx;
				top: 20rpx;
				width: 104rpx;
				height: 48rpx;
				line-height: 42rpx;
				font-size: 20rpx;
				white-space: nowrap;
				text-align: center;
				color: #fff;
				background: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-08-26/20200826/c4b408c0e77d77900a210ae500558a4e.png') no-repeat no-repeat;
				background-size: 100% 100%;
			}
		}

		.swiper {
			width: 100%;
			height: 600rpx;

			.swiper-item {
				width: 100%;
				height: 600rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.content-top {
			padding: 70rpx 0 50rpx 0;
			background-color: #fff;
		}

		.case-name {
			margin: 0 0 40rpx 0;
			line-height: 56rpx;
			text-align: center;
			font-size: 42rpx;
			font-weight: bold;
			color: #151515;
		}

		.square-info {
			margin-bottom: 56rpx;
			font-size: 24rpx;
			color: #6C6C6C;
			text-align: center;
		}

		.brief {
			margin: 0 auto;
			width: 622rpx;
			font-size: 24rpx;
			color: #444444;
			line-height: 52rpx;
		}

		.line {
			margin: 60rpx auto;
			width: 690rpx;
			height: 2rpx;
			background: #F6F6F6FF;
		}

		.case-goods-view {
			padding: 0 20rpx;

			.case-goods-title {
				padding-left: 10rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #0A0A0A;
			}

			.case-goods-list {
				margin: 32rpx 0;
				white-space: nowrap;
				width: 100%;

				.scroll-view-item {
					display: inline-block;
					padding: 0 10rpx;
					width: 236rpx;
					box-sizing: border-box;

					image {
						display: block;
						width: 216rpx;
						height: 216rpx;
						border-radius: 8rpx;
					}

					.case-goods-name {
						margin: 24rpx 0 30rpx 0;
						font-size: 24rpx;
						color: #28221F;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						text-align: center;
					}

					.case-goods-price {
						margin-bottom: 40rpx;
						font-size: 24rpx;
						text-align: center;
						font-weight: bold;
						color: #141414;
					}

					.case-goods-click {
						margin-bottom: 80rpx;
						font-size: 22rpx;
						text-align: center;
						color: #9E9E9E;
					}

				}
			}
		}

		.message-view {
			margin-top: 20rpx;
			padding: 30rpx 30rpx;
			background-color: #FFFFFF;

			.message-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #0A0A0A;
			}

			.message-list {
				margin: 32rpx 0;
				white-space: nowrap;
				width: 100%;

				.scroll-view-item {
					margin-right: 20rpx;
					padding: 30rpx 30rpx;
					display: inline-block;
					width: 458rpx;
					height: 247rpx;
					background: #F8F8F8;
					border: 1px solid #F2F2F2;
					border-radius: 8rpx;
					box-sizing: border-box;

					image {
						display: block;
						width: 66rpx;
						height: 66rpx;
						border-radius: 50%;
					}
				}

				.user-info {
					display: flex;

					.user-info-right {
						margin-left: 20rpx;

						.name {
							font-size: 24rpx;
							font-weight: bold;
							color: #333333;
						}

						.time {
							font-size: 20rpx;
							color: #909090;
						}
					}
				}

				.comment {
					margin: 30rpx auto 0 auto;
					width: 388rpx;
					font-size: 26rpx;
					color: #141414;
					//超过两行省略号
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					white-space: pre-wrap;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}

		}

		.more-btn {
			margin: 0 auto;
			width: 220rpx;
			line-height: 64rpx;
			border: 2rpx solid #E6E6E6;
			border-radius: 8rpx;
			text-align: center;
			font-size: 24rpx;
			color: #333333;
		}


		.case-recommen {
			margin-top: 20rpx;
			padding: 30rpx 30rpx;
			background-color: #FFFFFF;

			.case-recommen-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #0A0A0A;
			}

			.recommen-list {
				margin: 32rpx 0;
				white-space: nowrap;
				width: 100%;

				.case-item {
					margin-right: 20rpx;
					display: inline-block;
					width: 570rpx;
					border-radius: 8rpx;
					background-color: #F8F8F8;
					box-sizing: border-box;

					image {
						width: 100%;
						border-radius: 8rpx 8rpx 0px 0px;
						height: 456rpx;
					}

					.case-info {
						background-color: #F2F2F2;
						padding: 30rpx;
						border-radius: 0 0 8rpx 8rpx;
						text-align: center;

						.case-name {
							margin-bottom: 20rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 32rpx;
							color: #141414;
							font-weight: bold;
						}

						.case-brief {
							color: #6B6B6B;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 24rpx;

							text {
								margin: 0 10rpx;
							}
						}
					}
				}
			}
		}



		.case-details-img {
			margin-top: 20rpx;
			padding: 50rpx 30rpx;
			background-color: #ffffff;

			.case-details-title {
				padding-bottom: 20rpx;
				font-size: 32rpx;
				text-align: center;
				font-weight: bold;
				color: #0A0A0A;
			}

			.img-list {
				padding-bottom: 100rpx;

				image {
					margin: 40rpx auto 0 auto;
					display: block;
					width: 100%;
					border-radius: 8rpx;
				}
			}
		}

		.botton-menu {
			position: fixed;
			left: 0;
			bottom: 0;
			padding: 20rpx 30rpx;
			display: flex;
			width: 100%;
			height: 120rpx;
			background: #fff;
			box-shadow: 0px 1px 0px 0px #141414;

			.leave-btn {
				margin-right: 80rpx;
				width: 80rpx;

				image {
					display: block;
					margin: 0 auto;
					width: 34rpx;
					height: 33rpx;
				}

				view {
					margin-top: 16rpx;
					font-size: 20rpx;
					text-align: center;
					color: #141414;
				}
			}

			.collect-btn {
				margin-right: 84rpx;
				width: 80rpx;

				image {
					display: block;
					margin: 0 auto;
					width: 38rpx;
					height: 36rpx;
				}

				view {
					margin-top: 16rpx;
					font-size: 20rpx;
					text-align: center;
					color: #141414;
				}
			}

			.call-btn {
				width: 450rpx;
				line-height: 80rpx;
				background: #141414;
				font-size: 28rpx;
				font-weight: bold;
				text-align: center;
				color: #fff;
				border-radius: 8rpx;
			}
		}

		.popup-title {
			padding-top: 40rpx;
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
			color: #141414;
			line-height: 46rpx;
		}

		.input-view {
			padding: 40rpx 30rpx;
		}
	}
</style>
